<template>
	<view class="order-tip">
		<view class="tip-box" @click="openMask">
			<view>
				<text>小费</text>
				<text class="mf-tip-tip">（打赏提速）</text>
			</view>
			<view>
				<text v-if="tip > 0">{{currency}}{{ tip }}</text>
				<!-- <text class="color-a" v-else>加小费抢单更快哦</text> -->
				<!-- <text class="icon-jiantou iconfont"></text> -->
			</view>
		</view>
		<view class="global_mask tip-mask" :class="{ active: showMask }" @click="openMask">
			<view class="mask-content " @click.stop="preventClose">
				<view class="title-box">
					<text @click="openMask">取消</text>
					<text class="title">小费</text>
					<text @click="confirm">确定</text>
				</view>
				<view class="fee-box">
					<view class="select-box">
						<view class="item" :class="{ active: selectIndex == index }" @click="selectTip(index)" v-for="(item, index) in list" :key="index">
							<text v-if="item == 0">不加了</text>
							<text v-if="item != 0">{{currency}}{{ item }}</text>
						</view>
					</view>
					<!-- <view class="input-box" :class="{ active: selectIndex == -1 }" @click="selectTip(-1)">
						<text>其他金额</text>
						<text v-if="selectIndex == -1">：{{currency}}</text>
						<view id="widthTag" class="width-tag">{{ inputFee }}</view>
						<input
							class="fee-input"
							:style="inputStyle"
							:focus="inputFoucus"
							type="digit"
							maxlength="8"
							value="inputFee"
							ref="feeInput"
							v-if="selectIndex == -1"
							@input="feeInput"
							@blur="feeInput"
						/>
					</view> -->
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import common from '../../../utils/common.js';
export default {
	name: 'OrderTip',
	data() {
		return {
			showMask: false,
			list: [0, 2, 5, 8, 10, 20],
			selectIndex: -1, // -1表示其他金额
			fee: 0,
			inputFee: '',
			inputStyle: '',
			inputFoucus: false,
			currency: '¥',
		};
	},
	props: ['tip'],
	created() {
		common.changeCurrency(this);
		for (var i = 0; i < this.list.length; i++) {
			if (this.list[i] == this.tip) {
				this.selectIndex = i;
				this.fee = this.tip;
				break;
			}
		}
		if (this.selectIndex == -1) {
			this.inputFee = this.tip;
		}
	},
	methods: {
		openMask(type) {
			this.showMask = !this.showMask;
			if (this.showMask) {
				for (var i = 0; i < this.list.length; i++) {
					if (this.list[i] == this.tip) {
						this.selectIndex = i;
						this.fee = this.tip;
						break;
					}
				}
				if (this.selectIndex == -1) {
					this.inputFee = this.tip;
					this.inputFoucus = true;
				}
			} else {
				this.inputFoucus = false;
			}
		},
		confirm() {
			let fee = this.selectIndex == -1 ? this.inputFee * 1 : this.fee;
			if (!fee) {
				fee = 0;
			}
			this.$emit('getTip', fee);
			this.inputFoucus = false;
			this.showMask = false;
		},
		// 禁止点击穿透
		preventClose(type) {
			return false;
		},
		selectTip(type) {
			if (this.selectIndex != type) {
				this.selectIndex = type;
			}
			if (type == -1) {
				console.log('22222aaaaaaaaaaaaa');
				this.inputFoucus = true;
			} else {
				this.fee = this.list[type];
			}
		},
		feeInput(e) {
			let _this = this
			const query = uni.createSelectorQuery().in(this);
			this.inputFee = e.detail.value;
			console.log('333333333333333333', e);
			setTimeout(() => {
				if (_this.inputFee) {
					query
						.select('#widthTag')
						.boundingClientRect(res => {
							console.log('得到布局位置信息', res);
							_this.inputStyle = `width:${res.width + 8}px`;
						})
						.exec();
				} else {
					_this.inputStyle = `width:2px`;
				}
			}, 300);
		}
	}
};
</script>

<style lang="stylus" scoped>
$theme-color=#f60
.mf-tip-tip
	border 1px dashed #eee
	margin-left 20upx
.order-tip
	.tip-box
		height 114upx
		box-sizing border-box
		background-color #fff
		background-image url("")
		background-size 35upx 28upx
		background-repeat no-repeat
		background-position 24upx center
		display flex
		align-items center
		justify-content space-between
		font-size 14px
		padding 0 20upx 0 70upx
		.iconfont
			vertical-align middle
		.color-a
			color #aaa
	.tip-mask
		.mask-content
			color #000
			.title-box
				display flex
				justify-content space-between
				align-items center
				font-size 14px
				padding 15px 10px
				border-bottom 1PX solid #e5e5e5
				.title
					font-size 15px
			.fee-box
				.select-box
					display flex
					flex-wrap wrap
					padding 15px 0 0 13px
					font-size 14px
					.item
						margin-right 13px
						margin-bottom 13px
						width -webkit-calc(33.3333% - 13px)
						width calc(33.3333% - 13px)
						padding 10px
						box-sizing border-box
						border 1PX solid #e5e5e5
						text-align center
						&.active
							color $theme-color
							border-color $theme-color
							background rgba($theme-color, 0.1)
				.input-box
					display flex
					justify-content center
					align-items center
					font-size 14px
					border 1PX solid #e5e5e5
					padding 8px
					margin 0 13px 15px
					position relative
					&.active
						color #04b7a5
						border-color #04b7a5
					.fee-input
						width 2PX
						text-align center
						color #04b7a5
						transition all 0.3s
						display inline-block
					.width-tag
						display inline-block
						position absolute
						top -9999px
						left -9999px
</style>
